<template>
  <div class="page1">
    <Row class="content">
      <Col span="8" style="marginright: 10px">
        <div class="list">
          <div class="left">
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-68">
              <barHotCityChart
                :hData='hData'
                ref="chart2"
                id="left_3"
              ></barHotCityChart>
            </div>
          </div>
        </div>
      </Col>
      <Col span="15">
        <div class="list" style="height: 100%">
          <div class="left">
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-68">
              <barCentenChart
                :cData='cData'
                ref="chart3"
                id="left_3"
              ></barCentenChart>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
const barHotCityChart = () => import("./components/page1/barHotCityChart");
const barCentenChart = () => import("./components/page1/barCentenChart");
import { hangYeAnalysis } from "@/api/page2Api";


export default {
  name: "page1",
  props: ["selectRangeDate"],
  components: {
    barHotCityChart,
    barCentenChart,
  },
  data() {
    return {
      tableData: [],
      eData: [],
      cData: [],
      hData: [],
      everyPer: 0,
      xOffset: 0,
      circle: {
        x: 250,
        y: 250,
        radius: 218,
      },
      title: [
      ],
      warea: { x: 250, y: 250, max: 700 },
      dots: [],
      resizeFn: null,
      animationFrame1: null,
      animationFrame2: null,
      centerBox: {
        width: 0,
        height: 0,
      },
    };
  },
  methods: {
  },
  mounted() {
    hangYeAnalysis().then(res => {
      this.tableData = res
      // 平均薪资
      this.cData = this.tableData['行业'].slice(0,10).map((it,index) => ({name: it,salary:this.tableData['平均薪资'].reverse()[index]}))
      this.hData = this.tableData['行业'].slice(0,10).map((it,index) => ({name: it,value:this.tableData['岗位数'][index]}))
    
    })
  },
  beforeDestroy() {
  },
};
</script>

<style lang="less" scoped>
.title {
    position: absolute;
    display: inline-block;
    color: #6EDDF1;
    background: #14418E;
    left: 50%;
    transform: translate(-50%, -70%);
    font-size: 12px;
    .title-10 {
        // display: inline-block;
        padding: 2px 5px;
        // background: radial-gradient(4.75rem 0.9rem ellipse, rgba(7, 9, 34, .8) 60%, rgb(21, 67, 145));
    }

}
.page1 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044a;
  overflow: hidden;

  .content {
    height: 95%;

    .ivu-col {
      height: 100%;
    }

    .circlePie {
      height: 100%;
      padding: 0 0 40px;
      text-align: center;
      position: relative;

      canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }

      #dot {
        background: rgba(0, 0, 0, 0);
      }
    }
    .center_list {
      height: 100%;
    }
    .list {
      height: 100%;

      .left,
      .right {
        background: #0d1341;
      }

      .left,
      .right,
      .center {
        width: 100%;
        height: 95%;
        border: 1px solid #0d2451;
        position: relative;

        #left1,
        #left2,
        #left3,
        #right1,
        #right2,
        #right3,
        #center2 {
          height: 100%;
        }

        .chart-68 {
          width: 100%;
          height: 100%;
          float: left;
        }

        .chart-32 {
          width: 32%;
          height: 100%;
          float: left;
        }
      }
    }
  }

  .bottom-list {
    height: 35%;

    .ivu-col {
      height: 100%;

      .list {
        height: 100%;
        width: 33.3333%;
        // padding-right: 1.5%;
        float: left;

        #bottom_4 {
          // padding: 0 20px;
        }

        .bottom {
          width: 100%;
          height: 100%;
          border: 1px solid #0d2451;
          position: relative;
        }
      }

      .right-bottom {
        width: 100%;
        padding-right: 0;

        .bottom1 {
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
